<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<script src="../js/vue.js"></script>
<!-- 
关于VueComponent：
    1.school本质上是一个名为VueComponent的构造函数且不是程序员定义的，是Vue.extend生成的

    2.写<school/>或<school></school>后，Vue解析时会帮我们创建school组件的实例对象，
    即Vue帮我们执行：new VueComponent(option)
    
    3.注意：每次调用Vue.extend时，返回的都是一个全新的VueComponent。

    4.this指向：
        (1).组件配置中：
                data函数、methods等函数中，this是VueComponent实例对象
        (2).new Vue(option)中，this是Vue实例对象

    5.VueComponent的实例对象，即组件实例对象
    
 -->
<body>
    <div id="root">
        <school></school>
    </div>
    <script>
        Vue.config.productionTip = false;
        const school = Vue.extend({
            name: "school",
            data() {
                return {
                    name: "尚硅谷",
                    address: "北京"
                }
            },
            template: `
            <div>
                <h2>{{name}}</h2>
                <h2>{{address}}</h2>
            </div>
            `
        })
        new Vue({
            el: "#root",
            components: {
                School: school
            }
        })
    </script>
</body>

</html>